<template xmlns="http://www.w3.org/1999/html">
  <div class="box">
    <el-scrollbar height="100%;">
      <div style="margin-left: 65px">
        <el-radio-group v-model="select" @change="analysisChange">
          <el-radio-button label="器官分析" />
          <el-radio-button label="整体分析" />
        </el-radio-group>
      </div>

      <el-select v-model="scriptsValue" class="m-2" placeholder="默认官方分析脚本" style="margin-left: 45px;margin-top: 15px;margin-bottom: 15px;" @change="scriptsChange">
        <el-option
            v-for="item in scriptsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <div id="whole">
        <div style="text-align: center;font-size: 30px;font-family: 楷体;margin-bottom: 20px;font-weight: bolder;">整体分析</div>
        <div style="margin-left: 20px;font-size: 18px;font-family: 楷体;border-bottom: 1px solid #366479;">
          <div>
            体素间距：<br />
            <el-tag>{{ spacing }}</el-tag>

          </div>
          <div>
            体素方向：<br />
            <div  v-for="(item, index) in direction" :key="index">
              <el-tag class="ml-2" type="success">{{ item }}</el-tag>
            </div>
          </div>
          <div>
            体素原点：<br />
            <div v-for="(item, index) in origin" :key="index">
              <el-tag>{{ item }}</el-tag>
              <br />
            </div>
          </div>
          <div>
            体素形状：
            <el-tag>{{ voxel_shape }}</el-tag>
          </div>
          <div style="margin-bottom: 30px;">
            体素总数：
            <el-tag>{{ voxel_total }}</el-tag>
          </div>
        </div>

        <!-- 体素数值 start -->
        <div style="margin-left: 20px;font-size: 18px;font-family: 楷体;border-bottom: 1px solid #366479;margin-top: 20px">
          <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.content"
            >
              <span style="color: white">{{ activity.name }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
        <!-- 体素数值 end -->

        <div class="line">

        </div>
      </div>

      <div id="part">
        <!-- 器官分析 -->
        <div style="text-align: center;font-size: 30px;font-family: 楷体;margin-bottom: 20px;font-weight: bolder;">器官分析</div>
        <div class="referer">

        </div>

        <div class="chart">

        </div>

        <div style="width: 100%;text-align: center">
          <el-select v-model="labelNumValue" placeholder="选择对应的器官" @change="handleChange" style="width: 150px; margin-bottom: 30px;">
            <el-option
                v-for="item in labelNum"
                :key="item"
                :label="item"
                :value="item"
            >
              <span style="float: left;color:black">器官</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px">
          {{ item }}
        </span>
            </el-option>
          </el-select>
        </div>

        <div class="diameter">

        </div>
        <div class="area">

        </div>

        <div v-for="(item, index) in organData" :key="index" style="float: left;width: 100%;text-align: center">
          <el-tag class="ml-2" type="success">最大值：{{ item.max }}</el-tag>
          <el-tag class="ml-2" type="success">最小值：{{ item.min }}</el-tag>
          <el-tag class="ml-2" type="success">中位数：{{ item.median }}</el-tag><br />
          <el-tag class="ml-2" type="success">平均值：{{ item.mean }}</el-tag>
          <el-tag class="ml-2" type="success">标准差：{{ item.std }}</el-tag>
        </div>

      </div>

    </el-scrollbar>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import labels from "@/api/labels";
import analysis from "@/assets/js/analysis/BarLabelRotation"
import referer from "@/assets/js/analysis/RefererWebsite"
import lineGradient from "@/assets/js/analysis/LineGradient";
import NightingaleChart from "@/assets/js/analysis/NightingaleChart";

export default {
  name: "Label",
  setup() {
    const activities = ref([])
    const voxel_total = ref("");
    const voxel_shape = ref("");
    const origin = ref([])
    const direction = ref([])
    const spacing = ref("")

    const select = ref('器官分析')

    const scriptsValue = ref('')

    const scriptsOptions = [
      {
        value: '官方分析脚本',
        label: '官方分析脚本',
      },
      {
        value: '测试分析脚本',
        label: '测试分析脚本',
      }]

    const labelNumValue = ref('')
    let labelNum= ref([])

    let anaData = [];
    const organData = ref([])


    // 加载函数
    onMounted(() => {
      getList("123141");
      // document.getElementById("whole").style.display = "none"
    });

    function getList(labelId) {
      let da = {}
      da.labelId = labelId
      labels.analysis(da).then(res =>{
        if(res.code === 200){
          voxel_total.value = JSON.parse(res.data.data).voxel_total
          voxel_shape.value = JSON.parse(res.data.data).voxel_shape
          spacing.value = JSON.parse(res.data.data).spacing

          activities.value.length = 0
          activities.value.push({"name":"体素最大值","content":JSON.parse(res.data.data).voxel_max,"color":"white"})
          activities.value.push({"name":"体素最小值","content":JSON.parse(res.data.data).voxel_min,"color":"white"})
          activities.value.push({"name":"体素平均值","content":JSON.parse(res.data.data).voxel_mean,"color":"white"})
          activities.value.push({"name":"体素中位数","content":JSON.parse(res.data.data).voxel_median,"color":"white"})
          activities.value.push({"name":"体素标准差","content":JSON.parse(res.data.data).voxel_std,"color":"white"})

          origin.value.length = 0
          JSON.parse(res.data.data).origin.forEach(function(e){
            origin.value.push(e)
          })

          direction.value.length = 0
          JSON.parse(res.data.data).direction.forEach(function(e){
            direction.value.push(e)
          })

          let xData = []
          let distribution = []
          let distributionRatio = []
          for(let i in JSON.parse(res.data.data).voxel_value_distribution){
            xData.push(i)
            distribution.push(JSON.parse(res.data.data).voxel_value_distribution[i])
          }
          for(let i in JSON.parse(res.data.data).voxel_value_distribution_ratio){
            xData.push(i)
            distributionRatio.push(JSON.parse(res.data.data).voxel_value_distribution_ratio[i])
          }

          lineGradient.create('.line', xData, distribution, distributionRatio)
          NightingaleChart.create('.chart',JSON.parse(res.data.data))

          labelNum.value.length = 0
          for(let i=1;i<=Object.keys(JSON.parse(res.data.data).label_num).length;i++){
            labelNum.value.push(i);
          }

          anaData = JSON.parse(res.data.data)
          analysis.create(".diameter",anaData, 0, 1)
          analysis.create(".area",anaData, 1, 1)
          referer.create(".referer", anaData)

          organData.value.length = 0
          organData.value.push(anaData.voxel_organ[1])
        }
      })
    }

    function handleChange(value){
      organData.value.length = 0
      organData.value.push(anaData.voxel_organ[value])
      analysis.create(".diameter",anaData, 0, value)
      analysis.create(".area",anaData, 1, value)
    }

    function scriptsChange(value){
      console.log(value)
      switch (value){
        case "官方分析脚本": getList("123141");break;
        case "测试分析脚本": getList("123123");break;
      }
    }

    function analysisChange(){
      console.log(select.value)
      switch (select.value){
        case "整体分析": {
          document.getElementById('whole').style.display = 'block'
          document.getElementById('part').style.display = 'none'
        }break;
        case "器官分析": {
          document.getElementById('part').style.display = 'block'
          document.getElementById('whole').style.display = 'none'
        }break;
      }
    }

    return{
      activities,
      voxel_total,
      voxel_shape,
      origin,
      direction,
      spacing,
      labelNum,
      labelNumValue,
      handleChange,
      organData,
      select,
      scriptsValue,
      scriptsOptions,
      scriptsChange,
      analysisChange
    }
  }
}
</script>

<style scoped>
.box {
  color:white !important;
  width: 100%;
  height: 97%;
  padding: 0;
  margin-top: 22px;
  overflow-y: auto;
  scrollbar-width: thin; /* 宽度可根据需要更改 */
}
.diameter, .area{
  width: 50%;
  height: 400px;
  float: left;
}
.referer{
  width: 100%;
  height: 400px;
  float: left;
}
.line, .chart{
  width: 100%;
  height: 400px;
  float: left;
  border-bottom: 1px solid #366479;
  margin-top: 20px;
  margin-bottom: 30px;
}
.chart{
  width: 90%;
}
.el-timeline-item__timestamp{
  color: white !important;
}
</style>